<template>
    <div class="setting-box">
        <div class="setting-title">
            <h6>被服下单显示</h6>
            <span>配置后，被服下单时，只显示已勾选的材料。</span>
        </div>
        <!-- 设置表格 -->
        <div class="setting-table">
            <el-table
                :data="list"
                border
                stripe
                height="100%"
                style="width:100%;"
                >
                <el-table-column
                    label="定制材料"
                    align="center">
                    <template slot="header" slot-scope="scope">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleSelectListAll">定制材料</el-checkbox>
                    </template>
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.selected" @change="handleSelectList"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center">
                </el-table-column>
                <el-table-column
                    v-for="(v,i) in columns"
                    :key="i"
                    :prop="v.code"
                    :label="v.title"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
        <!-- 保存 -->
        <div class="handle-box" v-if="list.length > 0">
          <a class="btn" @click="handleSelectListAll()">{{checkAll?'取消':'全选材料'}}</a>
          <a class="btn" v-show="canInvertSelect" @click="handleInvertSelect">反选材料</a>
          <el-button  v-show="canInvertSelect || checkAll" style="width: 100px" :loading="isSave" @click="handleSaveSetting">
            <span v-if="!isSave">保存</span>
            <span v-else>保存中……</span>
          </el-button>
        </div>
    </div>
</template>

<script>
import {clothCustomBarUrl,
        clothSettingCustomTableUrl,
        clothSettingSaveDataUrl
} from '../../common/ajax'
import {mergeJsonObject} from '../../common/com'
export default {
    data(){
        return{
            list:[],
            columns:[],
            isIndeterminate: true,
            checkAll:false,
            isSave:false,
            canInvertSelect:false, //可以反选
        }
    },
    created(){
        this.loadColums()
        this.loadList()
    },
    methods:{
        handleSaveSetting(){
            let self = this;
            let product = self.handleCheckedSet(self.list,'selected','sku');
            if(product.n.length == 0){
                self.$Message.warning('材料至少选择一项！');
                return
            }
            if(!self.isSave){
                self.isSave = true;
                let o = {
                    belong:2,
                    product:product.p
                };
                jQuery.ajax({
                    url: clothSettingSaveDataUrl,
                    type:'post',
                    dataType: 'json',
                    timeout:5000,
                    cache: false,
                    data:JSON.stringify(o),
                    success: function(data) {
                        self.isSave = false;
                        if(data.success){
                            self.$Message({type:'success',message:'保存成功！'});
                            self.loadColums();
                            self.loadList();
                        }else {
                            self.$Message({type:'warning',message:'保存失败！ERROR：'+data.msg});
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        self.isSave = false;
                        self.$Message({type:'warning',message:'保存失败！ERROR：'+'status：'+XMLHttpRequest.status+' readyState：'+XMLHttpRequest.readyState+' 错误信息:'+textStatus});
                    }
                })
            }
        },
        handleCheckedSet(list,show,code){
            let ret = {n:[],p:[]};
            for(var val of list){
            if(val[show]){
                ret.n.push(val[code])
            }else {
                ret.p.push(val[code])
            }
            }
            return ret
        },
        //反选
        handleInvertSelect(){
            this.list.forEach(function(val,ind){
            val.selected = !val.selected;
            })
        },
        handleSelectList(){
            let s = this.selectAllStatus(this.list,'selected');
            if(s ==1 || s==-1){
                s==1?this.checkAll = true:this.checkAll = false;
                this.isIndeterminate = false;
                this.canInvertSelect = false;
            }else {
                this.checkAll = false;
                this.isIndeterminate = true;
                this.canInvertSelect = true;
            }
        },
        selectAllStatus(list,key){
            let l = list.length,
                    n = 0;
            list.forEach(function(val,ind){
            if(val[key]){
                n ++;
            }
            })
            if(l==n){
            // 全部选中的
                return 1
            }
            if(n == 0){ // 一个也没选
                return -1
            }
            return 0
        },
        changeStatus(list,key,status){
            list.forEach(function(val,ind){
                val[key] = status
            })
        },
        handleSelectListAll(){ // 全选
            let self = this;
            let s = self.selectAllStatus(self.list,'selected')
            if(s == 1){
                self.changeStatus(self.list,'selected',false);
                self.checkAll = false
            }else{
                self.changeStatus(self.list,'selected',true);
                self.checkAll = true
            }
            self.isIndeterminate = false
            self.canInvertSelect = false;
        },
        loadList(){
            let self = this;
            jQuery.ajax({
                url: clothSettingCustomTableUrl,
                type:'get',
                dataType: 'json',
                timeout:5000,
                cache: false,
                success: function(data) {
                    if(data.success){
                        let le = [];
                        let d = data.data.sort(function(a,b){
                            return a.soa - b.soa
                        });
                        for(var val of d){
                            let o = val;
                            let serial = JSON.parse(val.serial);
                            o.selected = true;
                            if(o.soa == 1){
                                o.selected = false;
                            }
                            o = mergeJsonObject(o,serial);
                            le.push(o)
                        }
                        self.list = le;
                        self.handleSelectList()
                    }else {
                        self.$Message({type:'warning',message:data.msg});
                    }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                self.$Message({type:'warning',message:'status：'+XMLHttpRequest.status+' readyState：'+XMLHttpRequest.readyState+' 错误信息:'+textStatus});
            }
            })
        },
        loadColums(){
            let self = this;
            jQuery.ajax({
                url: clothCustomBarUrl,
                type:'get',
                dataType: 'json',
                cache: false,
                timeout:5000,
                data:{opt:2},
                success: function(data) {
                    if(data.success){
                        let le = [];
                        let d = data.data.sort(function(a,b){
                            return a.soa - b.soa
                        });
                        for(var val of d){
                            val['width'] = 140;
                            le.push(val)
                        }
                        self.columns = le;
                    }else {
                        self.$Message({type:'warning',message:data.msg});
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    self.$Message({type:'warning',message:'status：'+XMLHttpRequest.status+' readyState：'+XMLHttpRequest.readyState+' 错误信息:'+textStatus});
                }
            })
        }
    }
}
</script>

<style lang="less">
    .setting-box{
        height: 100%;
        .setting-title{
            color: #000;
            h6{
                font-size: 17px;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 24px;
            }
            span{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 17px;
            }
        }
        .setting-table{
            height: calc(~'100% - 120px');
            .el-table th.is-leaf{
                height: 38px  !important;
                background: #F5F7FA  !important;
                font-size: 16px !important;
                font-family: Microsoft YaHei;
                font-weight: bold;
                line-height: 21px;
                color: #000;
                border: 1px solid #EAEDF3;
                padding: 0;
            }
            .el-table--enable-row-transition .el-table__body td{
                font-size: 14px;
                border: 1px solid #EAEDF3;
            }
            .el-checkbox__input.is-checked .el-checkbox__inner{
                background-color: #17A882;
                border-color: #17A882;
            }
            .el-checkbox__input.is-indeterminate .el-checkbox__inner{
                background-color: #17A882;
                border-color: #17A882;
            }
            .el-checkbox__label,.el-checkbox__input.is-checked+.el-checkbox__label{
                font-size: 16px !important;
                font-family: Microsoft YaHei;
                font-weight: bold;
                line-height: 21px;
                color: #000;
            }
        }
        .handle-box{
            width: 100%;
            height: 72px;
            margin-top: 3px;
            box-sizing: border-box;
            padding: 16px;
            background: #fff;
            border-radius: 2px;  
            border: 1px solid #EAEDF3;
            .btn{
                display: inline-block;
                width: 90px;
                height: 40px;
                background: #FFFFFF;
                border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
                opacity: 1;
                border-radius: 2px;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                margin-right: 16px;
                cursor: pointer;
            }
            .el-button{
                width: 90px;
                height: 40px;
                background: #17A882;
                opacity: 1;
                border-radius: 2px;
                text-align: center;
                line-height: 16px;
                font-size: 16px;
                color: #fff;
            }
        }
    }
</style>